<!--
 * @Author: your name
 * @Date: 2020-09-25 09:58:32
 * @LastEditTime: 2020-09-27 15:44:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \emergency-pc\src\test.vue
-->
<template>
  <div class="app-root" :class="themeClass">
    <div class="app-container">
      <p>www</p>
      <div class="name">
        htmic
      </div>
      <p>{{ theme }}</p>

      <select v-model="theme1" @change="getthemt($event)">
        <option value="light">light</option>
        <option value="dark">dark</option>
      </select>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Dynamic Themes',
      theme1: 'light'
    }
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme1}`
    }
  },
  methods: {
    getthemt (event) {
      this.theme1 = event.target.value
      console.log(event.target.value)
      this.$store.commit('changetheme', this.theme1)
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/index.scss';
.app-container {
  @include themify($themes) {
    color: themed('font-color');
    background-color: themed('bg-color');
  }

  .name {
    @include themify($themes) {
      background-color: themed('bg-color');
    }
  }

  // @include background_color("background_color1");
}
</style>
